<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5动画测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../favicon.ico" />
    <style>
        body {
            width: 800px;
            margin: 30px;
            background-color: #E9E9E9;
        }

        div.polaroid {
            width: 294px;
            padding: 10px 10px 20px 10px;
            border: 1px solid #BFBFBF;
            background-color: white;
            /* Add box-shadow */
            box-shadow: 2px 2px 3px #aaaaaa;
        }

        div.rotate_left {
            animation: flower2 5s;
            animation-iteration-count: infinite;
            float: left;
            transform: rotate(7deg);
        }

        div.rotate_right {
            animation: flower1 5s;
            animation-iteration-count: infinite;
            float: left;
            transform: rotate(-8deg);
        }

        @keyframes flower1 {
            0% {
                transform: rotate(-8deg);
            }

            25% {
                transform: rotate(8deg);
            }

            90% {
                transform: rotate(-8deg);
            }
        }


        @keyframes flower2 {
            0% {
                transform: rotate(-5deg);
            }

            25% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(9deg);
            }

            80% {
                transform: rotate(-4deg);
            }
        }

        #leaf2 i {
            position: absolute;
            left: 250px;
            top: 50px;
            width: 23px;
            height: 27px;
            /*调用动画*/
            background: url(ban1.png);
            background-size: cover;
            animation: leafkey 10s linear;
            animation-iteration-count: infinite;
            z-index: 100;
        }


        #leaf2 i:nth-of-type(n) {
            left: 0px;
            top: 0px;
            transform: rotate(125deg);
            animation: fallingleft 5s 0s infinite;
        }

        #leaf2 i:nth-of-type(4n) {
            left: 60px;
            top: 20px;
            transform: rotate(15deg);
            animation: fallingleft2 6s 0s infinite;
        }

        #leaf2 i:nth-of-type(5n) {
            left: 20px;
            top: 20px;
            transform: rotate(-5deg);
        }



        #leaf2 i:nth-of-type(2n+1) {
            left: 100px;
            top: 50px;
            width: 20px;
            height: 30px;
            animation: fallingleft2 7s 0s infinite;
            transform: rotate(50deg);
        }

        #leaf2 i:nth-of-type(6n) {
            left: 190px;
            top: 30px;
            width: 10px;
            height: 10px;
            animation: fallingleft3 5s 0s infinite;
            transform: rotate(90deg);
        }

        #leaf2 i:nth-of-type(7n+1) {
            left: 80px;
            top: 60px;
            width: 10px;
            height: 15px;
            animation: fallingleft 5s 0s infinite;
        }

        #leaf2 i:nth-of-type(3n+2) {
            left: 200px;
            top: 80px;
            width: 15px;
            height: 20px;
            animation: fallingleft3 5s 0s infinite;
        }

        #leaf2 i:nth-of-type(3n+2) {
            opacity: .3;
        }

        #leaf2 i:nth-of-type(n) {
            transform: rotate(180deg);
        }


        #leaf2 i:nth-of-type(n) {
            animation-timing-function: ease-in-out;
        }

        #leaf2 i:nth-of-type(n) {
            animation-delay: 1.9s;
        }

        #leaf2 i:nth-of-type(2n) {
            animation-delay: 3.9s;
        }

        #leaf2 i:nth-of-type(3n) {
            animation-delay: 2.3s;
        }

        #leaf2 i:nth-of-type(4n) {
            animation-delay: 4.4s;
        }

        #leleaf2aves i:nth-of-type(5n) {
            animation-delay: 5s;
        }

        #leaf2 i:nth-of-type(6n) {
            animation-delay: 3.5s;
        }

        #leaf2 i:nth-of-type(7n) {
            animation-delay: 2.8s;
        }

        #leaf2 i:nth-of-type(8n) {
            animation-delay: 1.5s;
        }

        #leaf2 i:nth-of-type(9n) {
            animation-delay: 3.3s;
        }

        #leaf2 i:nth-of-type(10n) {
            animation-delay: 2.5s;
        }

        #leaf2 i:nth-of-type(11n) {
            animation-delay: 1.2s;
        }

        #leaf2 i:nth-of-type(12n) {
            animation-delay: 4.1s;
        }

        #leaf2 i:nth-of-type(13n) {
            animation-delay: 1s;
        }

        #leaf2 i:nth-of-type(14n) {
            animation-delay: 4.7s;
        }

        #leaf2 i:nth-of-type(15n) {
            animation-delay: 3s;
        }


        #leaf2 i:nth-of-type(n) {
            opacity: .7;
        }

        #leaf2 i:nth-of-type(3n+1) {
            opacity: .5;
        }

        #leaf2 i:nth-of-type(3n+2) {
            opacity: .3;
        }

        #leaf2 i:nth-of-type(n) {
            transform: rotate(180deg);
        }

        #leaf2 i:nth-of-type(n) {
            animation-timing-function: ease-in-out;
        }

        @keyframes fallingleft {

            0% {
                transform:
                    translate3d(0, 0, -20px) rotate(0deg);
            }

            100% {
                transform:
                    translate3d(550px, 700px, -50px) rotate(110deg);
                opacity: 0;
            }
        }

        @keyframes fallingleft3 {
            0% {
                transform:
                    translate3d(0, 0, -30px) rotate(-20deg);
            }

            100% {
                transform:
                    translate3d(430px, 640px, 50px) rotate(-70deg);
                opacity: 0;
            }
        }

        @keyframes fallingleft2 {
            0% {
                transform:
                    translate3d(0, 0, 60px) rotate(90deg);
            }

            100% {
                transform:
                    translate3d(300px, 680px, 0) rotate(0deg);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div id="leaf2">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="polaroid rotate_left">
        <img src="taohua1.png" />
        <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
    </div>
    <div class="polaroid rotate_right">
        <img src="taohua2.png" />
        <p class="caption">2010年上海世博会，中国馆。</p>
    </div>
    <h3 style="clear: both;">
        <a href="../../lab.html">back</a>
    </h3>
</body>

</html>